<template>
  <div class="app-container">
    <h1>App 根组件</h1>
    <!-- <a href="#/home">首页</a>
    <a href="#/movie">电影</a>
    <a href="#/about">关于</a> -->
    <router-link to="/home">首页</router-link>
    <router-link to="/movie">电影</router-link>
    <router-link to="/about">关于</router-link>
    <hr/>

    <div class="box">
      <!--  只要在项目中安装和配置了 vue-router， 就可以使用router-view这个组件了 它的作用很简单： 占位符 -->
      <router-view></router-view>
      <!-- <component :is="iconName"></component> -->
    </div>
  </div>
</template>

<script>
import Home from '@/components/Home.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'

export default {
  data() {
    return {
      iconName: 'Home'
    }
  },
  created() {
    // 只要当前的APP组件一被创建，就立即监听 window对象的onhashchange事件
    window.onhashchange = () => {
      console.log('监听到了hash 地址的变化',location.hash);
      switch (location.hash) {
        case '#/home': 
          this.iconName = 'Home';
          break;

        case '#/movie':
          this.iconName = 'Movie';
          break;

        case '#/about':
          this.iconName = 'About';
          break;
      }
    }
  },
  components:{
    Home,
    Movie,
    About
  }
}
</script>

<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
  display: flex;
}
</style>
